import React, { useMemo, useState, useEffect } from 'react'
import getCinemaListAction from '../redux/action/getCinemaListAction'
import { connect } from 'react-redux'
import { SearchBar, List } from 'antd-mobile'

function Search(props) {
    const [textValue, setText] = useState("")

    let { cinemaList, getCinemaListAction } = props

    useEffect(() => {
        if (cinemaList.length === 0) {
            getCinemaListAction()
        }
    }, [cinemaList, getCinemaListAction])

    const getCinemaList = useMemo(
        () =>
            cinemaList.filter(item => item.name.toUpperCase().includes(textValue.toUpperCase()) ||
                item.address.toUpperCase().includes(textValue.toUpperCase()))
        ,
        [cinemaList, textValue]
    )

    return (
        <div>
            <div style={{ margin: '10px' }}>
                <SearchBar placeholder='请输入内容' showCancelButton={() => true} onChange={(value) => {
                    setText(value);
                }}  onCancel={() => {
                    props.history.push('/cinemas')
                }}/>
            </div>
            <List>
                {
                    getCinemaList.map(item => (
                        <List.Item
                            key={item.cinemaId}
                            description={item.address}
                            extra={
                                <div>
                                    <div style={{ color: '#ff5f16' }}>￥{item.lowPrice / 100}起</div>
                                    <span style={{ color: 'gray', fontSize: '10px', display: 'block', textAlign: 'center' }}>距离未知</span>
                                </div>
                            }
                        >
                            {item.name}
                        </List.Item>
                    ))
                }
            </List>
        </div>
    )
}

const mapStateToProps = (state) => ({
    cinemaList: state.CinemaReducer.list
})

const mapDispatchToProps = {
    getCinemaListAction
}

export default connect(mapStateToProps, mapDispatchToProps)(Search)